import React, { useEffect, useState } from "react";
import { useLocation } from "react-router";
import "./Detail.css"
import dayjs from "dayjs"
// import { getCommentsByArticleId } from "../../fake-api"
import dianzan from "../../assets/images/dianzan.png"
import pinglun from "../../assets/images/pinglun.png"
import axios from "axios";

export const Detail = () => {
    let { state } = useLocation()
    const [comment, setComment] = useState([])
    const [isDianZan, setIsDianZan] = useState(false)

    let detail = state.articles, commentList
    
    // 点赞和评论的冒泡点击事件   ----没用到， 因为没有相应的接口
    const clickReply = async (e, item) => {
        let name = e.target.className, count = 0

        if (!isDianZan) {
            switch (name) {
                case "comment-dianzan-icon":
                    !item.comment_info.is_digg
                case "comment--dianzan-count":
                    !item.comment_info.is_digg
                case "comment-pinglun-icon":
                    count++
                case "comment-pinglun-count":
                    count++
            }
        }
        count == 0 || isDianZan &&await setIsDianZan(a => !a)
    }
    useEffect(async () => {
        // 获取文章主题内容
        let result = await axios.post('/api/getCommentsByArticleId', {articleId: parseInt(detail.article_id)})
        await setComment(result.data.data.comments)

    }, [])

    // console.log(commentList, comment);
    return (
        <>
            <div className="detail-content">
                <div className="detail-author-wrapper">
                    <div className="detail-author-avatar">
                        <img src={detail.author_user_info.avatar_large} alt="" />
                    </div>
                    <div className="detail-author-info">
                        <div>
                            <span className="detail-author-name"><b >{detail.author_user_info.user_name}</b></span>
                            <span className="detail-author-level"></span>
                        </div>
                        <div className="detail-author-desc">
                            <p>{dayjs.unix(parseInt(detail.article_info.mtime)).format('YYYY年MM月DD日')} 阅读 {detail.author_user_info.got_view_count}</p>
                        </div>
                    </div>
                    <div className="detail-author-follow">
                        <button>关注</button>
                    </div>
                </div>
                <div className="detail-img">
                    <img src={detail.article_info.cover_image} alt="" />
                </div>
                <div className="detail-title">
                    <h2>{detail.article_info.title}</h2>
                </div>
                <div dangerouslySetInnerHTML={{ __html: detail.article_content }}></div>
            </div>

            <div className="detail-separate"></div>

            <div className="detail-comment">
                <div className="detail-comment-area" >
                    <img src={detail.author_user_info.avatar_large} alt="" />
                    <textarea placeholder="输入评论" />
                </div>
                {
                    comment.map((item, index) => {
                        return (
                            <div className="detail-comment-body" key={item.comment_id}>
                                <div className="detail-comment-avatar">
                                    <img src={item.user_info.avatar_large} alt="" />
                                </div>
                                <div className="detail-comment-info">
                                    <div className="detail-comment-user">
                                        <span className="detail-comment-name"><b>{item.user_info.user_name}</b></span>
                                        <span className="detail-comment-level"></span>
                                        <span className="detail-comment-company">{item.user_info.company}</span>
                                    </div>
                                    <span className="detail-comment-content">{item.comment_info.comment_content}</span>
                                    <div className="detail-comment-reply">
                                        <p>{dayjs.unix(parseInt(detail.article_info.mtime)).format('YYYY年MM月DD日')}</p>
                                        <div onClick={(e, item) => clickReply(e, item)} name="container">
                                            <img className="comment-dianzan-icon" src={dianzan} alt="" />
                                            <span className="comment-dianzan-count">{item.comment_info.digg_count ? item.comment_info.digg_count : "点赞"}</span>
                                            <img className="comment-pinglun-icon" src={pinglun} alt="" />
                                            <span className="comment-pinglun-count" >{item.comment_info.reply_count ? item.comment_info.reply_count : "评论"}</span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        )
                    })
                }

            </div>
        </>
    )
}